<!--登录-->
<template>
  <div class="login-contain">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login-form">
          <h1>欢迎</h1>
          <el-form-item>
            <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginForm.password" :prefix-icon="Lock" type="password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login-btn" type="primary" size="large" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {User,Lock} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import  useUserStore  from '@/store/modules/user.ts'
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";

const loginForm = reactive({username:'',password:''})
const userStore = useUserStore()
const loading = ref(false)
const router = useRouter()
const login = ()=> {
  const loginForms = {
    username:loginForm.username,
    password:loginForm.password
  }
   userStore.userLogin(loginForms).then(res=>{
     ElNotification.success('下午好')
     router.push('/')
   },(err)=>{
     console.log(err)
   })
}
</script>

<style scoped lang="scss">
.login-contain{
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/login_bg.6a965af.png");
  background-repeat: no-repeat;
  background-size: cover;
  .login-form{
    width: 40%;
    position: relative;
    top: 30vh;
    background-color: #515085;
    padding: 20px;
    border-radius: 10px;
    h1{
      margin-bottom: 30px;
    }
    .login-btn{
      width: 100%;
    }
  }
}
</style>